<script>
export default {
  name: "File",
  props: {
    value: {
      type: Array,
      default: () => {
        return []
      }
    },
    mainId: {
      type: String,
      required: true
    },
    accept: {
      type: String,
      default: ''
    },
    acceptType: {
      type: String,
      default: ''
    },
    tips: {
      type: String,
      default: ''
    },
    multiple: {
      type: Boolean,
      default: true
    },
    limit: {
      type: Number,
      default: 100
    },
    showList: {
      type: Boolean,
      default: false
    },
    maxSize: {
      type: Number,
      default: 1024 * 2 * 1024 * 1024
    },
    totalSize: {
      type: Number,
      default: 1024 * 2 * 1024 * 1024
    },
    formData: {
      type: Object,
      default: () => { }
    },
    field: {
      type: String,
      required: true
    },
    fileKey: {
      type: String,
      default: 'files'
    }
  },
  data() {
    return {
      files: []
    }
  },
  methods: {
    onHanddleDelete(file) {
      let fileIndex = -1
      for (let i = 0; i < this.value.length; i++) {
        let item = this.value[i];
        if (item.uid === file.uid) {
          fileIndex = i;
        }
      }
      this.value.splice(fileIndex, 1);
      this.updateValue();
    },
    onHanddleSuccess(response, file, fileList) {
      this.$message({ message: '文件: ' + file.name + ' 上传成功', type: 'success' })
      for (let i = 0; i < this.value.length; i++) {
        let item = this.value[i];
        if (item.uid === file.uid) {
          let rtn = file.response.data;
          this.$set(this.value, i, { ...item, 'id': rtn.id, 'path': rtn.path, percentage: file.percentage, status: file.status, 'hashSign': rtn.hashSign })
        }
      }
      this.updateValue();
    },
    onHanddleProgress(event, file, fileList) {
      for (let i = 0; i < this.value.length; i++) {
        let item = this.value[i];
        if (item.uid === file.uid) {
          this.$set(this.value, i, { ...item, percentage: file.percentage, status: file.status })
        }
      }
    },
    onHanddleBeforeUpload(file) {
      if (file.size > this.maxSize) {
        this.$message({ message: '文件: ' + file.name + ' 大小超过限制', type: 'error' })
        return false;
      } else {
        console.log(file)
        if(this.accept && this.acceptType && !file.type.match(this.acceptType)) {
          this.$message({ message: '文件: ' + file.name + ' 类型不匹配', type: 'error' })
          return false;
        } else{
          this.value.push({ 'uid': file.uid, 'name': file.name, 'size': file.size, 'mainId': this.mainId, 'type': file.type, 'percentage': 0, "status": "ready" });
        }
      }
    },
    onHanddleError(error, file) {
      this.$message({ message: '文件: ' + file.name + ' 上传失败，请重试', type: 'error' })
    },
    getFileSize() {

    },
    toMb(size) {
      return (size / 1024 / 1024).toFixed(2)
    },
    toPercentage(percentage) {
      return (percentage / 1.0).toFixed(0)
    },
    updateValue() {
      this.$set(this.formData, this.field, this.value)
      this.$forceUpdate()
    }
  }
}
</script>

<template>
  <div>
    <el-upload action="/fx/api/uploadFile" :data="{ 'mainId': this.mainId, 'fileKey': this.fileKey }" :multiple="multiple" :accept="accept" :limit="limit"
      :before-upload="onHanddleBeforeUpload" :on-success="onHanddleSuccess" :on-error="onHanddleError"
      :on-progress="onHanddleProgress" :show-file-list="showList">
      <el-button size="small" slot="trigger" style="margin-right: 10px;">
        <el-icon class="el-icon-upload2"></el-icon>
        <span style="font-weight: bold;"> &nbsp;点击上传 <br><br>Upload</span>
      </el-button>
      <slot name="btn"></slot>
      <slot name="tip"></slot>
      <div class="el-upload__tip" v-if="tips">{{ tips }}</div>
    </el-upload>
    <table class="tb-table" style="margin-top: 10px;">
      <tr class="tb-tr">
        <td class="tb-td tb-title" width="10%">#</td>
        <td class="tb-td tb-title" width="30%">文件名 File Name</td>
        <td class="tb-td tb-title" width="15%">大小 Size</td>
        <td class="tb-td tb-title" width="15%">进度 Progress</td>
        <td class="tb-td tb-title" width="10%">状态 Status</td>
        <td class="tb-td tb-title" width="15%">操作 Operation</td>
      </tr>
      <tr v-for="(item, index) in this.value" :key="index">
        <td class="tb-td">{{ index + 1 }}</td>
        <td class="tb-td">
          <el-tooltip :content="item.name" placement="bottom" effect="light">
            <div class="ellipsis" style="margin-left: 3px;">{{ item.name }}</div>
          </el-tooltip>
        </td>
        <td class="tb-td">
          {{ toMb(item.size) }} mb
        </td>
        <td class="tb-td">
          {{ toPercentage(item.percentage) }} %
        </td>
        <td class="tb-td">
          <i class="loading-icon el-icon-loading" v-if="item.status === 'ready' || item.status === 'uploading'"></i>
          <i class="loading-icon el-icon-check" v-if="item.status === 'success'"></i>
        </td>
        <td class="tb-td">
          <el-button type="text" size="mini" icon="el-icon-delete" @click="onHanddleDelete(item)">删除 Del</el-button>
        </td>
      </tr>
    </table>
  </div>
</template>

<style scoped>
.tb-table {
  text-align: center;
  width: 100%;
  border-collapse: collapse;
}

.tb-tr,
.tb-td {
  border: 1px solid #ddd;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 300px;
}

.el-upload__tip {
  color: brown;
  font-size: 14px;
}
</style>
